<template>
  <el-table class="ELtable" ref="table" :data="tableData">
    <el-table-column prop="serviceName" label="服务名" width="200" style="position: relative;">
      <template #default="{ row }">
        <el-input disabled v-model="row.serviceName" placeholder="" @change="handleChangeValue" />
      </template>
    </el-table-column>
    <el-table-column prop="conditionUrl" label="前置URL">
      <template #default="{ row }">
        <el-input disabled v-model="row.conditionUrl" placeholder="" @change="handleChangeValue" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
const tableData = ref([
  { serviceName: '默认服务', conditionUrl: '' }
])
import { propTypes } from '@/utils/propTypes'
const props = defineProps({
  data: {
    default: () => [] as any
  }
})
watch(() => props.data,
  () => {
    // 批量编辑后更新表格数据并处理选中
    tableData.value = props.data.map((item) => {
      return {
        ...item,
      }
    })
    if (tableData.value.length === 0) {
      tableData.value.push({ serviceName: '默认服务', conditionUrl: '' })
    }
  }, {
  deep: true
})
const emit = defineEmits(['setEnvironmentUrl'])
const handleChangeValue = () => {
  emit('setEnvironmentUrl', tableData.value)

}
</script>

<style scoped>
:deep(.el-input__wrapper) {
  box-shadow: none;
  border-radius: 0;
  margin-left: -10px;
}

:deep(.el-table__body tr > td:hover) {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #888 inset;
  }
}

:deep(.el-table__body tr:hover > td) {
  background-color: transparent !important;
  /* 移除背景颜色 */
}

:deep(.el-table__body tr > td) {
  height: 32px;
  line-height: 32px;
  padding: 0;

  .cell {
    padding: 0;
  }
}
</style>
